<script setup lang="ts">
  import Cart from '../components/Cart.vue'
  import Preload from '../components/Preload.vue'
  import Weather from '../components/SoViBoard/Weather.vue'
  import Currency from '../components/SoViBoard/Currency.vue'
  import Phrases from '../components/SoViBoard/Phrases.vue'
  import ToDo from '../components/SoViBoard/ToDo.vue'
  import Calendar from '../components/SoViBoard/Calendar.vue'
</script>
<template>
  <Preload />
  <XyzTransition appear xyz="fade duration-14 delay-4">
    <section
      class="flex flex-col gap-5 md:grid md:grid-cols-2 md:grid-rows-12 lg:h-[200vh] lg:grid-cols-8 xl:h-[70vh] xl:grid-cols-12">
      <Cart
        class="md:col-span-2 md:row-span-2 lg:col-span-4 lg:row-span-2 xl:col-span-6 xl:col-start-1 xl:row-span-5 xl:row-start-1">
        <template v-slot:header>Привычки</template>
        <Calendar />
      </Cart>

      <Cart
        class="md:col-span-1 md:row-span-2 md:row-start-7 lg:col-span-2 lg:row-span-3 xl:col-span-3 xl:col-start-7 xl:row-span-6 xl:row-start-1">
        <template v-slot:header>Валюта</template>
        <Currency />
      </Cart>

      <Cart
        class="md:col-span-1 md:col-start-2 md:row-span-4 lg:col-span-4 lg:h-fit xl:col-span-3 xl:row-start-1 xl:h-fit">
        <template v-slot:header>Погода</template>
        <Weather />
      </Cart>

      <Cart
        class="md:col-span-1 md:col-start-1 md:row-span-4 md:row-start-3 lg:col-span-4 lg:col-start-1 lg:row-start-3 lg:h-fit xl:col-span-6 xl:col-start-1 xl:row-start-6 xl:h-fit">
        <template v-slot:header>Планы на день</template>
        <ToDo />
      </Cart>

      <Cart
        class="md:col-span-1 md:row-span-2 lg:col-span-2 lg:col-start-7 lg:row-span-3 lg:row-start-1 xl:col-span-3 xl:col-start-7 xl:row-start-7 xl:h-fit">
        <template v-slot:header>Фраза дня</template>
        <Phrases />
      </Cart>
    </section>
  </XyzTransition>
</template>
